import React, {useRef} from "react";
import {Button, Card, Divider,} from "antd";
import {connect, Dispatch} from "dva";
import {AnyAction} from "redux";
import RegionTree from "@/components/RegionTree";
import styles from "./index.less";
import ProTable, {ActionType, ProColumns, RequestData} from "@ant-design/pro-table";
import {DeleteOutlined, EditOutlined, PlusOutlined} from "@ant-design/icons";
import {renderAddress, transformParams} from "@/utils/utils";
import organizationService from "@/services/organization";
import {ParamsType} from "@ant-design/pro-provider";
import GridContainer from "@/components/GridContainer";
import moment from "moment";
import {ProfileVO} from "@/types/common";
import _ from 'lodash';

interface Props {
  dispatch: Dispatch<AnyAction>;
}

interface State{
  selectedKeys:(string|number)[];
  type?:string;
}

class List extends React.Component<Props, State> {

  state={
    selectedKeys:[],
    type:'',
  }

  onSelect=(selectedKeys: (string|number)[],type?:string)=>{
    this.setState({selectedKeys,type});
  }

  render() {

    const {
      selectedKeys,type
    }=this.state;

    const address=type?{
     address:{
       [type]:selectedKeys[0]
     }
    }:undefined

    return (
      <GridContainer>
          <Card
            bordered={false}
            title={'行政区域'}
            className={styles.left}
          >
            <RegionTree value={selectedKeys} onChange={this.onSelect} />
          </Card>
          <OrganizationList params={address}/>
      </GridContainer>
    );
  }
}


const queryList= async (params:any, sorter:any, filter:any): Promise<RequestData<ProfileVO>> => {
  let paramsObject={
    ...params,
    ...params.organization,
  }
  delete paramsObject.organization;
  let sortObject={};
  _.forIn(sorter,(value,key)=>{
    const sortKey=key.split(',')[1];
    sortObject[sortKey]=value;
  })
  const  dto = transformParams(paramsObject, sortObject);
  const response=await organizationService.queryList(dto);
  const {data}=response;
  const {pagination}=data;
  return {
    success:true,
    data:data.items,
    total:pagination.total,
  };
}

interface OrganizationListProps {
  params?:ParamsType
}

const OrganizationList: React.FC<OrganizationListProps> = (props:OrganizationListProps) => {

  const actionRef = useRef<ActionType>();

  const columns: ProColumns<ProfileVO>[] = [
    {
      title: '公司名称',
      align:'center',
      dataIndex: ['organization','name'],
    },
    {
      title: '法人',
      align:'center',
      dataIndex: ['organization','legalRepresentative'],
    },
    {
      title: '社会统一信用代码',
      align:'center',
      dataIndex: ['organization','unifiedSocialCreditCode'],
    },
    {
      title: '电话',
      align:'center',
      dataIndex: ['organization','telephoneNumber'],
      search:false,
    },
    {
      title: '邮箱',
      align:'center',
      dataIndex: ['organization','email'],
      search:false,
    },
    {
      title: '地址',
      align:'center',
      dataIndex: ['organization','address'],
      search:false,
      render:(dom, entity, index) => {
        return renderAddress(entity.organization?.address);
      }
    },
    {
      title: '管理员',
      align:'center',
      dataIndex: ['user','name'],
      search:false,
    },
    {
      title: '创建时间',
      align:'center',
      dataIndex: ['organization','gmtCreated'],
      search:false,
      sorter:{
        multiple:0
      },
      render:(dom,entity,index,action,schema)=>{
        return moment(entity.organization.gmtCreated).format('YYYY-MM-DD')
      }
    },
    {
      title: '更新时间',
      align:'center',
      dataIndex: ['organization','gmtModified'],
      search:false,
      sorter:{
        multiple:0
      },
      render:(dom,entity,index,action,schema)=>{
        return moment(entity.organization?.gmtModified).format('YYYY-MM-DD')
      }
    },
    {
      title: '操作',
      align:'center',
      dataIndex: 'action',
      search:false,
      render:(dom,entity,index,action,schema)=>{
        return (
          <>
            <Button type="link" icon={<EditOutlined />}/>
            <Divider type={"vertical"} />
            <Button type="link" icon={<DeleteOutlined />}/>
          </>
        )
      }
    },
  ];

  return (
    <ProTable<ProfileVO>
      headerTitle={'单位列表'}
      actionRef={actionRef}
      // @ts-ignore
      rowKey={((record) => record.organization?.id)}
      params={props.params}
      scroll={{x:1200}}
      search={{
        span: 8,
        defaultCollapsed:false,
        collapseRender: false,
        filterType: 'query',
        layout: 'vertical',
      }}
      pagination={{pageSize:10}}
      className={styles.right}
      toolBarRender={() => [
        <Button type="primary">
          <PlusOutlined /> 新增单位
        </Button>,
      ]}
      request={queryList}
      columns={columns}
    />
  );
};


export default connect()(List)
